<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<!-- //TODO :  -->
<title>Home</title>
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //Custom Theme files -->
<link href="/front/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="/front/css/style.css" type="text/css" rel="stylesheet" media="all">
<!-- js -->
<script src="/front/js/jquery.min.js"></script>
<script type="text/javascript" src="/front/js/bootstrap-3.1.1.min.js"></script>
<!-- //js -->	
<!-- cart -->
<script src="/front/js/simpleCart.min.js"> </script>
<!-- cart -->
</head>
<body>
	<!--header-->
	<div class="header">
		<div class="container">
			<nav class="navbar navbar-default" role="navigation">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<h1 class="navbar-brand"><a  href="index">Yummy</a></h1>
				</div>
				<!--导航栏navbar-header-->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="index" class="active">首页</a></li>
                        
						<li >
							<a href="product/all">生日蛋糕</a>
							
					   <li class="dropdown grid">
							<a href="#">精品糕点</a>
										
						<li class="dropdown grid">
							<a href="#" class="dropdown-toggle list1" data-toggle="dropdown">联系我们 </a>
														
					</ul> 
					<!--/.navbar-collapse-->
				</div>
				<!--//navbar-header-->
			</nav>
			<div class="header-info">
              <!--导航栏查找小标志-->
				<div class="header-right search-box">
					<a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>				
					<div class="search">
						<form class="navbar-form">
							<input type="text" class="form-control">
							<button type="submit" class="btn btn-default" aria-label="Left Align">
								Search
							</button>
						</form>
					</div>	
				</div>
                <!--导航栏登录小标志-->
				<div class="header-right login">
					<a href="contact/1"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
					<div id="loginBox">                
						<form id="loginForm">
							<fieldset id="body">
								<fieldset>
									<label for="Username">Username</label> 
									<input type="text" name="userUsername">
								</fieldset>
								<fieldset>
									<label for="password">Password</label> 
									<input type="password" name="userPassword">
								</fieldset>
								<input type="submit" id="login" value="Sign in">
								<label for="checkbox"><input type="checkbox" id="checkbox"> <i>Remember me</i></label>
							</fieldset>
							<!--  <p>New User ? <a class="sign" href="account">Sign Up</a> <span><a href="#">Forgot your password?</a></span></p>-->
							<p>New User ? <a class="sign" href="account">Sign Up</a> <span><a href=pay>Forgot your password?</a></span></p>
						</form>
					</div>
				</div>
                <!--导航栏购物车小标志-->
				<div class="header-right cart">
					<a href="#"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a>
					<div class="cart-box">
						<h4><a href="checkout">
							<span class="simpleCart_total"> $0.00 </span> (<span id="simpleCart_quantity" class="simpleCart_quantity"> 0 </span>) 
						</a></h4>
						<p><a href="javascript:;" class="simpleCart_empty">Empty cart</a></p>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<!--//header-->
	<!--banner-->
    <!--中间大图-->
	<div class="banner">
		<div class="container">
			<h2 class="hdng">Yummy <span>Cakes</span> for u</h2>
			<p>Our best cakes make your day special</p>
			<!-- 更改首页大图链接到展示所有产品页面-->
			<a href="product/all">SHOP NOW</a>
			<div class="banner-text">			
				<img src="/front/images/2.png" alt=""/>	
			</div>
		</div>
	</div>			
	<!--//banner-->
    
	<!--gallery-->
	<div class="gallery">
		<div class="container">
			<div class="gallery-grids">
				<div class="col-md-8 gallery-grid glry-one">
			<!-- 第一个蛋糕图片  宽的-->       
            <a href="product/all"><img th:src="${'/front/images/g1.jpg'}" class="img-responsive" alt=""/>
						<div class="gallery-info">
							<p><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> view</p>
	<a class="shop" href="single">SHOP NOW</a>
							
						</div>
					</a>
					<div class="galy-info">
						<p>榛果巧克力</p>
						<div class="galry">
							<div class="prices">
								<h5 class="item_price">$299.00</h5>
							</div>
												
							
						</div>
					</div>
				</div>
                <!-- 第二个蛋糕图片  窄的-->
				<div class="col-md-4 gallery-grid glry-two">
					<a href="product/all"><img th:src="${'/front/images/g2.jpg'}" class="img-responsive" alt=""/>
						<div class="gallery-info galrr-info-two">
							<p><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> view</p>
							<a class="shop" href="single">SHOP NOW</a>
							
						</div>
					</a>
					<div class="galy-info">
						<p>锦簇珍园</p>
						<div class="galry">
							<div class="prices">
								<h5 class="item_price">$300.00</h5>
							</div>
											
						</div>
					</div>
				</div>
               
                <!--两行排列的图片展示 从库中读数据展示出来的-->
				<div  th:each="product : ${products}"  class="col-md-3 gallery-grid " style="width:282px">
					<!-- 	<a th:href="products/*{product.productId}"> -->
						<a href="product/all"><img th:src="${product.getImgs().get(0).getImgUrl()}" class="img-responsive" width="278"  style="height:280px" height="278" alt=""/>
						<div class="gallery-info">
							<p><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> view</p>
							<a class="shop" href="single">SHOP NOW</a>
							<div class="clearfix"> </div>
						</div>
					</a>
					<div class="galy-info">
						<p th:text="${product.productName}"></p>
						<div class="galry">
							<div class="prices">
								<h5 class="item_price" th:text="'$'+${product.productPrice}"></h5>
							</div>		
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
				<!--两行排列的图片展示-->
			</div>	
		</div>
	</div>
	<!--//gallery-->
	<!--subscribe-->
	<div class="subscribe">
		 <div class="container">
			 <h3>Newsletter</h3>
			 <form>
				 <input type="text" class="text" value="Email" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Email';}">
				 <input type="submit" value="Subscribe">
			 </form>
		 </div>
	</div>
	<!--//subscribe-->

	
	<div class="footer-bottom">
		<div class="container">
			<p> 2019 yummy cakes for u.
	</div>
</body>
</html>